import { Link,useNavigate } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, message } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
// 导入资源
import { Table, Tag, Space,Popconfirm } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'
import useChannels from '@/hooks/useChannels'
import { useEffect, useState } from 'react'
import { GetarticlesApi,DeleteArticleApi} from '@/apis/articles'

const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {
    const Tagstatus = {
        1: <Tag color='warning'>待审核</Tag>,
        2: <Tag color='success'>审核通过</Tag>,
    }
    // 准备列数据
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: data => Tagstatus[data]
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button type="primary" shape="circle" icon={<EditOutlined onClick={()=>navigate(`/publish?id=${data.id}`)}/>} />
                        <Popconfirm
                            title="删除文章"
                            description="确认要删除文章吗?"
                            onConfirm={()=>confirm(data)}
                            okText="删除"
                            cancelText="取消"
                        >
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined />}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    // 准备表格body数据
    // const data = [
    //     {
    //         id: '8218',
    //         comment_count: 0,
    //         cover: {
    //             images: [],
    //         },
    //         like_count: 0,
    //         pubdate: '2019-03-11 09:00:00',
    //         read_count: 2,
    //         status: 2,
    //         title: 'wkwebview离线化加载h5资源解决方案'
    //     }
    // ]

    const { channels } = useChannels()
    const navigate = useNavigate()

    //当前是第几页
    const [currentPage, setCurrentPage] = useState(1)

    //获取文章列表
    const [list, setList] = useState([])
    const [count, setCount] = useState(0)
    async function getList(reqData = {}) {
        const res = await GetarticlesApi(reqData)
        setList(res.data.results)
        setCount(res.total_count)
    }

    useEffect(() => {
        getList()
    }, [])

    //筛选文章列表
    const onFish = async (formValue) => {
        console.log(formValue)
        // 1. 准备参数
        const { channel_id, date, status } = formValue
        const reqData = {
            status,
            channel_id,
            begin_pubdate: date ? date[0].format('YYYY-MM-DD') :undefined,
            end_pubdate: date ? date[1].format('YYYY-MM-DD') :undefined,
        }
        // 2. 使用参数获取新的列表
        getList(reqData)
    }

    const pageChange = (page) => {
        setCurrentPage(page)
        console.log("page:", page)
    }

    //删除文章
    const confirm = (data)=>{
        const articleId = data.id
        async function Del(articleId) {
            await DeleteArticleApi(articleId)
            await getList()
            message.success("删除成功！")
        }
        Del(articleId)
    }
    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: '文章列表' },
                    ]} />
                }
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: '' }} onFinish={onFish}>
                    <Form.Item label="状态" name="status"
                    >
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={1}>草稿</Radio>
                            <Radio value={2}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="频道" name="channel_id"
                    >
                        <Select
                            placeholder="请选择文章频道"
                            style={{ width: 120 }}
                        >
                            {channels.map(item => <Option key={item.id} value={item.id}>{item.channel}</Option>)}
                        </Select>
                    </Form.Item>

                    <Form.Item label="日期" name="date"
                    >
                        {/* 传入locale属性 控制中文显示*/}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                            筛选
                        </Button>
                    </Form.Item>

                    <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
                        <Table rowKey="id" columns={columns} dataSource={list}
                            pagination={{
                                current: currentPage,
                                pageSize: 5,
                                onChange: pageChange,
                                total: count
                            }}
                        />
                    </Card>
                </Form>
            </Card>
        </div>
    )
}

export default Article